<template>
    <div>
        <!--头部内容-->
        <mt-header title="信息管理系统"></mt-header>
        <transition name="router" mode="out-in">
            <router-view></router-view>
        </transition>

        <!-- 底部内容 -->
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" :to="{name:'home'}">
                <span class="mui-icon icon-shouye1"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" :to="{name:'member'}">
                <span class="mui-icon icon-diamond"></span>
                <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link class="mui-tab-item" :to="{name:'shopcart'}">
                <span class="mui-icon icon-gouwucheman">
                    <span class="mui-badge">{{cartNum}}</span>
                </span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" :to="{name:'search'}">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label">查找</span>
            </router-link>
        </nav>

    </div>
</template>

<script>
    import connect from './components/common/connect';
    import prodTools from './components/common/prodTools';
    //先创建父组件,后创建子组件
    export default {
        data() {
            return {
                cartNum: prodTools.getTotalCount(),
            }
        },
        created() {
            //     this.$ajax.get('http://182.254.146.100:8899/api/getlunbo')
            //         .then(res => {
            //             console.log(res)
            //         })
            //这里的this是VueComponent
            //记录this: let self= this;
            // console.log(connect);
            // 箭头函数可以保证this是VueComponent
            connect.$on('addShopCart', goodsNum => {
                // console.log(this);
                // console.log('接受到了num' + goodsNum);
                //this就是connect 而不是VueComponent
                this.cartNum += goodsNum;
            })
        }
    }
</script>

<style>
    body {
        background-color: white;
    }

    .router-enter-active,.router.-leave-active{
        transition: opacity .5s
    }

    .router-enter,.router-leave-to{
        opacity: 0;
    }
</style>